<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <link rel="stylesheet" type="text/css" href="css/cglist.css"/>
	    <script type="text/javascript" src="js/jquery.1.9.1.js" ></script>
	    <script type="text/javascript" src="js/rem.js" ></script>
		<title>采购订单列表</title>
	</head>
	<body style="background: #fff;">
		<div class="top">
			<div class="top_left">
				<span class="top_left_con1">审批状态</span>
				<img class="top_left_xia1" src="img/jtxia.png" />
				<img class="top_left_up1" src="img/jtup.png" />
			</div>
			<div class="top_right">
				<span class="top_left_con2">供货商</span>
				<img class="top_left_xia2" src="img/jtxia.png" />
				<img class="top_left_up2" src="img/jtup.png" />
			</div>
			<div class="sou"></div>
			<div class="cate_mid">
			    <form id="searchForm" name="searchForm" method="get" action="" onsubmit="">
			        <div class="text_box" name="list_search_text_box" onclick="">
			            <input id="keyword" name="search" type="text" placeholder="请输入采购单号" class="text" value="">
			            <input type="submit" value="" class="submit" id="list_search_submit">
			            <div class="close">取消</div>
			        </div>
			    </form>
			</div>
		</div>
		<ul class="company">
			<li>全部<img src="img/jtyou.png" /></li>
			<li>待审批<img src="img/jtyou.png" /></li>
			<li>已驳回<img src="img/jtyou.png" /></li>
			<li>审批通过<img src="img/jtyou.png" /></li>
			<li>已完结<img src="img/jtyou.png" /></li>
		</ul>
		<ul class="examine">
			<li>全部<img src="img/jtyou.png" /></li>
			<li>北京分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
		</ul>
		<img style="display: block; width: 2.82rem;margin: 37% auto;" src="img/wu.png"/>
		<a href="add.html"><div class="pay">新增</div></a>
	</body>
	<script>
		$(function(){
			var winHeight = $(window).height();
			var topHeight = $('.top').height();
			var topPadding = parseFloat($('.top').css('padding-top'))*2;
			var conHeight = winHeight-topHeight;
			$('.company').css({'height':conHeight+'px','top':topHeight+topPadding+1+'px'});
			$('.examine').css({'height':conHeight+'px','top':topHeight+topPadding+1+'px'});
			$('.top_left').click(function(){
				$('.company').toggle();
				$('.examine').hide();
				$('.top_left_xia1').toggle();
				$('.top_left_up1').toggle();
				$('.top_left_xia2').show();
				$('.top_left_up2').hide();
				$('.top_left_con1').css('color','#000');
				$('.top_left_con2').css('color','#555');
			});
			$('.company li').click(function(){
				$('.top_left_xia1').show();
				$('.top_left_up1').hide();
				$(this).css('color','#457bc7').siblings().css('color','#000');
				$('.company').hide();
				var CompanyName = $(this).text();
				$('.top_left_con1').text(CompanyName);
				$('.top_left_con1').css('color','#555');
			});
			$('.top_right').click(function(){
				$('.examine').toggle();
				$('.company').hide();
				$('.top_left_xia2').toggle();
				$('.top_left_up2').toggle();
				$('.top_left_xia1').show();
				$('.top_left_up1').hide();
				$('.top_left_con1').css('color','#555');
				$('.top_left_con2').css('color','#000');
			});
			$('.examine li').click(function(){
				$('.top_left_xia2').show();
				$('.top_left_up2').hide();
				$(this).css('color','#457bc7').siblings().css('color','#000');
				$('.examine').hide();
				var CompanyName = $(this).text();
				$('.top_left_con2').text(CompanyName);
				$('.top_left_con2').css('color','#555');
			});
			$('.sou').click(function(){
				$('.cate_mid').show();
				$('.examine').hide();
				$('.company').hide();
				$('.top_left_up1').hide();
				$('.top_left_xia1').show();
				$('.top_left_up2').hide();
				$('.top_left_xia2').show();
				$('.top_left_con1').css('color','#555');
				$('.top_left_con2').css('color','#555');
			});
			$('.close').click(function(){
				$('.cate_mid').hide();
			});
		});
	</script>

</html>
